<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      header {
        width: 375px;
        height: 60px;
        background-color: aquamarine;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <!-- 相当于根组件的template -->
    <div id="app">
      <tb-header></tb-header>
      <tb-content></tb-content>
    </div>

    <script src="./lib/Vue3.js"></script>
    <script>
      const { createApp } = Vue;

      // 根组件
      const app = createApp({
        data() {
          return {};
        },
      });

      // 全局创建组件
      // 里面要传入两个参数，第一个是组件名称，
      // 第二个参数是一个对象，之前的所有的选项都可以放进来，必须要有一个template选项
      // template选项写的是组件的模板（html片段）

      // 组件的取名规则
      // 顾名思义， 不能使用原生标签
      // 既不能使用现有的标签，也不能使用以后的标签
      // 最好在加上至少一个连字符,或者使用大驼峰
      // 但是使用的时候，只能使用连字符
      app.component("TbHeader", {
        data() {
          return {};
        },
        methods: {},
        template: "<header><span>淘宝首页</span></header>",
      });

      app.component("TbContent", {
        template: `
          <main>淘宝的内容</main>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
